<template>
    <view
        class="scroll-list-item"
        @click="$u.route({
            url: 'pages_v2/seriesInfo/index',
            params: {
                id: series.id
            }
        })"
    >
        <u-image
            width="678rpx"
            height="678rpx"
            :src="series.coverImg"
            mode="aspectFit"
        ></u-image>
        <view class="series-info">
            <u-text
                :text="series.title"
                color="#000000"
                size="34rpx"
                lineHeight="48rpx"
                margin="0 0 13rpx 0"
            ></u-text>
            <author-item
                :author="series.author"
            ></author-item>
        </view>
    </view>
</template>

<script>
    import AuthorItem from "@/components/AuthorItem"
    export default {
        name: "index",
        components: {
            AuthorItem
        },
        props: {
            series: {
                type: Object,
                default: () => {}
            }
        }
    }
</script>

<style lang="scss" scoped>
    .scroll-list-item {
        //margin-right: 26rpx;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        //margin-left: 20rpx;
        .series-info {
            box-sizing: border-box;
            width: 100%;
            //margin-top: 30rpx;
            background: #ffffff;
            padding: 24rpx 36rpx 16rpx 36rpx;
        }
    }
</style>
